<template>
    <div>
    <van-button @click="send">在线咨询</van-button>
    <van-dialog v-model="show" title="标题" show-cancel-button>
    <div>
    <ul>
    <li v-for="(i,index) in meslist" :key="index">{{i}}</li>
    </ul>
    </div>
    <div>
    <van-field v-model="mes"/><van-button @click="submit">发送</van-button>
    </div>
    </van-dialog>
  
    </div>
  </template>
  
  <script>
  import {v4 as uuid} from "uuid"
  export default {
      data(){
          return{
              show:false,
              mes:'',
              meslist:[],
              id:''
          }
      },
      methods: {
          send(){
              this.show=true
              this.conn()
          },
          conn(){
              this.id = uuid()
              this.ws = new WebSocket("ws://localhost:8000/sockconn?id="+this.id)
            //   onopen建立连接  send发送
              this.ws.onopen=()=>{
                  this.ws.send(JSON.stringify({"send":"conn","mes":"conn"}))
              }
            //   onmessage接收消息
              this.ws.onmessage=(res)=>{
                  console.log(res)
                  var data = JSON.parse(res.data)
                  this.meslist.push(data.meslist)
              }
          },
          submit(){
              var mm = this.id +"说:"+this.mes
              this.meslist.push(mm)
              this.ws.send(JSON.stringify({"send":"kefu","mes":mm}))
          }
      }
  }
  </script>
  
  <style>
  
  </style>